import React, { Component } from 'react';
import "../styles/views/Detail.scss"

import * as service from '../api/index'
import MySwiper from '../components/MySwiper';
import { NavBar, Skeleton } from 'antd-mobile'
import GoodNav from '../components/GoodNav';



class Detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodinfo: {},
            footerlist: [],
        }
    }
    async componentDidMount() {
        
        let res = await service.good_goodinfo({ goodid: this.props.location.state.id })
        // console.log(res);

        // 处理 将数组+字符串 处理为 数组+对象
        res.data.goodinfo.pics = res.data.goodinfo.pics && res.data.goodinfo.pics.map((item, inded) => {
            return { pic: item }
        })

        // 赋值
        this.setState({
            goodinfo: res.data.goodinfo
        })
    }
    back() {
        this.props.history.go(-1)
    }
    render() {
        return (
            <div className='detail'>
                {/* 顶部导航 */}
                <NavBar onBack={() => { this.back() }}>商品详情</NavBar>

                {/* 渲染 */}
                {
                    this.state.goodinfo.pics &&
                        this.state.goodinfo.pics.length ?
                        <>
                            {/* 轮播图 */}
                            < MySwiper swiperlist={this.state.goodinfo.pics} />
                            {/* 商品名称 */}
                            <div className="name">
                                {this.state.goodinfo.brandEN} &nbsp;
                                {this.state.goodinfo.brand} &nbsp;
                                {this.state.goodinfo.name}
                            </div>
                            {/* 商品价格 */}
                            <div className="price">
                                ¥ {
                                    this.state.goodinfo.salesPrice ?
                                        this.state.goodinfo.salesPrice.value : 0
                                }
                            </div>
                        </>
                        :
                        <>
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={10} animated />
                        </>
                }

                {/* 底部导航 */}
                <GoodNav goodid ={this.props.location.state.id } />
            </div>
        );
    }
}

export default Detail;